<template>
  <view
    class="trade-index-sub-tabs-container"
    :class="{ darkStyle: theme == 'dark' }"
  >
    <view class="sub-tabs-wrap">
      <view
        class="sub-tabs-item"
        v-for="(item, index) in list"
        :class="{ active: index == current }"
        :data-current="index"
        @click="onClick"
        :key="index"
      >
        <span class="sub-tabs-label">
          {{ item.name }}
        </span>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    list: { type: Array, default: () => [] },
    current: { type: Number | String, default: 0 },
  },
  data() {
    return {
      // list: [
      //   {
      //     name: 'USDT',
      //   },
      //   {
      //     name: 'BTC'
      //   },
      //   {
      //     name: 'ETH'
      //   }
      // ]
    };
  },
  methods: {
    onClick(e) {
      const current = e.currentTarget.dataset.current;
      this.$emit("onClick", current);
    },
  },
};
</script>

<style lang="less" scoped>
.trade-index-sub-tabs-container {
  &.darkStyle {
    background-color: @bg-color-dark;
    .sub-tabs-wrap {
      color: #c8c8c8;
    }
  }
  background-color: @white;
  border-bottom: 2rpx solid @border-color;
  .sub-tabs-wrap {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    color: #b9bbd2;
    padding: 0 30rpx;
    .sub-tabs-item {
      flex: 1;
      // padding: 0 30rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      &.active {
        .sub-tabs-label {
          color: @brand-color;
          position: relative;
          &::after {
            content: " ";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 30rpx;
            height: 4rpx;
            border-radius: 2rpx;
            background-color: @brand-color;
          }
        }
      }
      .sub-tabs-label {
        height: 60rpx;
        line-height: 60rpx;
        display: inline-block;
      }
    }
  }
}
</style>
